﻿<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <link href="css/reset.css" rel="stylesheet"/>
    <link href="css/iconfont.css" rel="stylesheet"/>
    <link href="css/index.css" rel="stylesheet"/>
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/f.js"></script>
    <title>用户管理</title>
    <script>
        function saveSection() {
            if ($("#phone").val() == null || $("#phone").val() == '') {
                $("#error").html("请输入");
                return false;
            }
            $("#fm").submit();
        }

        function modifySection(id, phone,name,address) {
            $("#myModalLabel").html("修改用户");
            $("#id").val(id);
            $("#phone").val(phone);
            $("#name").val(name);
            $("#address").val(address);
            $("#butid").html("修改");
        }

        function userDelete(id) {
            if (confirm("确定要删除这条数据吗?")) {
                $.post("${pageContext.request.contextPath}/UserServlet.action", {id: id, flag: 'deleteById'},
                    function (data) {
                        if (data == "true") {
                            alert("删除成功！");
                            window.location.reload(true);
                        } else {
                            alert("数据删除失败！");
                        }
                    },
                    'text'
                );
            }
        }

        function mysubmit() {
            $("#fid").submit();
        }

        function mySelect(obj) {
            //全选或全不选
            $(":checkbox").prop("checked", obj.checked);
        }

        function deletes() {
            var length = $(".inputcheck:not(:first):checked").length;
            if (length == 0) {
                alert("请选择要删除的数据！");
                return;
            }
            var strIds = [];
            for (var i = 0; i < length; i++) {

                strIds.push($(".inputcheck:not(:first):checked").get(i).value);
            }
            var ids = strIds.join(",");

            if (confirm("您确定要删除这" + length + "条数据吗？")) {
                $.post("UserServlet.action", {ids: ids, flag: 'deletes'}, function (data) {

                    if (data == 'true') {
                        alert("数据已成功删除！");
                        location.reload(true);
                    } else {
                        alert("数据删除失败！");
                    }
                }, "text");
            } else {
                return;
            }
        }
    </script>


</head>
<body>
<div class="PublicHead clearfix">
    <div class="leftBox clearfix">
        <div class="companyLogo">
            <img src="images/logo.jpg"/>
        </div>
        <!--<i class="iconfont icon-caidan Js_MenuList"></i>-->

        <div class="companyText">
            上海央谷管理系统
        </div>
    </div>
    <div class="RightBox clearfix">
        <div class="UserPhotoBox">
            <div class="UserPic">
                <img src="images/user.jpg"/>
            </div>
            <div class="UserName">
                管理员
            </div>
        </div>
        <a href="LoginServlet.action?flag=loginOut">
            <div class="dropOutBox">
                <i class="iconfont icon-app_icons--">
                </i>
                <span>退出</span>
            </div>
        </a>
    </div>
</div>

<div class="PublicDownWhole clearfix">
    <!--左侧-->
    <jsp:include page="top.jsp"></jsp:include>
    <!--右侧-->
    <div class="RightBox Js_RightBox">
        <div class="PublicContentBox">
            <!--公用指向页面名字-->
            <div class="PublicPointToAgeText">
                <span class="span1">用户管理</span> <span class="span2">后台用户管理列表</span>
            </div>
            <!--查询-->
            <form id="fid" action="${pageContext.request.contextPath}/UserServlet.action?flag=findUser" method="post">
                <div class="InquireBox clearfix">
                    <div class="InquireleftBox">
                        <div class="Text">手机号：</div>
                        <div class="InputDiv"><input name="phone" class="phoneInput" placeholder="请输入你需要查询的手机号"
                                                     value="${phone}"/></div>
                    </div>
                    <div class="PublicBtnIcon Color1Btn fr">
                        <i class="iconfont icon-icon-chaxun"></i>
                        <span onclick="mysubmit()">查询</span>
                    </div>
                </div>
            </form>
            <!--表修改-->
            <div class="InquireTableBox">
                <div class="headbox">
                    <div class="headboxtext">
                        <span class="span1">后台用户管理列表</span>
                    </div>
                    <!--批量删除-->
                    <div class="PublicBtnIcon Color5Btn" onclick="deletes()">
                        <i class="iconfont  icon-shanchu"></i>
                        <span>批量删除</span>
                    </div>

                    <div class="PublicBtnIcon Color2Btn fr Js_edit">
                        <i class="iconfont icon-changyongtubiao-mianxing-"></i>
                        <span>添加</span>
                    </div>
                </div>
                <!--查询到的表格-->
                <div class="InquireSelectTable">
                    <table class="PublicTableCss">
                        <thead>
                        <tr>
                            <td>
                                <input id="inputcheck" class="inputcheck" type="checkbox" name="inputcheck"
                                       onclick="mySelect(this)"/>
                                <label for="inputcheck"></label>
                                <span>全选</span>
                            </td>
                            <td>ID</td>
                            <td>手机号</td>
                            <td>操作</td>
                            <td>姓名</td>
                            <td>地址</td>
                        </tr>
                        </thead>
                        <tbody>
                        <c:forEach items="${userList}" var="user" varStatus="vs">
                            <tr>
                                <td>
                                    <input id="inputcheck${vs.count}" class="inputcheck" type="checkbox"
                                           name="inputcheck" value="${user.id}"/>
                                    <label for="inputcheck${vs.count}"></label>
                                </td>
                                <td>${user.id}</td>
                                <td>${user.phone}</td>
                                <td>${user.name}</td>
                                <td>${user.address}</td>
                                <td>
                                    <div class="PublicTableBtnIcon Color3Btn Js_edit"
                                         onclick="modifySection('${user.id}','${user.phone}','${user.name}','${user.address}')">
                                        <i class="iconfont icon-tubiaozhizuomobanyihuifu-"></i>
                                        <span>修改</span>
                                    </div>

                                    <div class="PublicTableBtnIcon Color4Btn Js_delete"
                                         onclick="userDelete(${user.id})">
                                        <i class="iconfont icon-shanchu"></i>
                                        <span>删除</span>
                                    </div>
                                </td>
                            </tr>
                        </c:forEach>
                        </tbody>
                    </table>
                </div>

                <div class="PageNumber">
                    <div class="NumbersBox">

                        <ul>
                            ${pageCode}
                        </ul>

                    </div>
                </div>
            </div>

        </div>
    </div>
</div>


<!-- alert通用 提示是否删除-->
<!-- <div class="PublicFloatBox f_delete">
        <div class="f_MiddleBox wid260">
            <div class="f_Head">
                <span>提示消息</span>
                <i class="Js_closeBtn iconfont icon-buoumaotubiao20 fr"></i>
            </div>
            <div class="f_content clearfix">

                <div class="f_someText">
                    <i class="iconfont icon-tishi"></i>
                    <span>确定删除此信息？</span>
                </div>
                <div class="f_pormatBtn  clearfix">
                    <div class="f_pormatBtn1" onclick="javascript:sectionDelete(${section.id})">
                        确定
                    </div>
                    <div class="publicf_btn2 fr Js_closeBtn">
                        取消
                    </div>
                </div>
            </div>
        </div>
    </div>-->
<!--添加用户浮层-->
<div class="PublicFloatBox adduser">
    <div class="f_MiddleBox wid400">
        <div class="f_Head" id="myModalLabel">
            <span>添加用户</span>
            <i class="Js_closeBtn iconfont icon-buoumaotubiao20 fr"></i>
        </div>
        <div class="f_content">
            <form id="fm" action="${pageContext.request.contextPath}/UserServlet.action?flag=saveOrUpdate"
                  method="post">
                <div class="f_alonediv">
                    <input id="id" type="hidden" name="id">
                    <div class="f_alone_name">
                        手机号:
                    </div>
                    <div class="f_alone_input">
                        <input class="f_p_input" id="phone" name="phone"/>
                    </div>
                </div>
                <div class="f_alonediv">
                    <div class="f_alone_name">
                        名字
                    </div>
                    <div class="f_alone_input">
                        <input class="f_p_input" id="name" name="name"/>
                    </div>
                </div>
                <div class="f_alonediv">
                    <div class="f_alone_name">
                        地址
                    </div>
                    <div class="f_alone_input">
                        <input class="f_p_input" id="address" name="address"/>
                    </div>
                </div>
            </form>
            <div class="f_alonediv1">
                <div class="f_alone_name">
                </div>
                <div class="f_alone_input1">
                    <!--publicbtn-->
                    <div class="publicf_btn">
                        <font id="error" style="color: red;"></font>
                        <div id="butid" class="publicf_btn1" onclick="javascript:saveSection()">
                            确定
                        </div>
                        <div class="publicf_btn2 fr Js_closeBtn">
                            取消
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<!--返回顶部-->
<!--<a href="javaScript:void();" class="back-to-top"><i class="iconfont icon-fanhuidingbu"></i> </a>-->
</body>
</html>